前言：

因在哔哩哔哩发布过相关视频，收到小伙伴的留言。所以在此讲解，希望能帮到大家

首先附上效果图：

开发文档：绘制步骤-3D立体图形-教程-地图 JS API | 高德地图API (amap.com)

基础 Mesh-立体 Mesh-示例中心-JS API 示例 | 高德地图API (amap.com)

开发环境：

后端接口是java，前端是vue、js 在这里只做前端代码讲解，后端只是基本数据

正式开始：

（讲解不周到的地方希望读者指出）

可能小伙伴们困扰的是如何实现多楼层

由官方给的示例，即上述第二个链接，看到的效果图入下：

只需将此处做修改，即可有悬空效果：

 若要实现多楼层，只需将同样的经纬度集合，循环遍历，取不同的高度值即可实现

 在开发过程中，还有一些类似点击、描边的需求，同时还有诸如旋转后，几何体看起来不封闭以及建筑物的地标文字不在模型中央上方的问题

以下附上关键代码，文末附上所有代码

点击事件：（其中有些函数可以在开发文档中找到）

横线或竖线：

几何体封闭：

地标文字在模型中央上方:（原理：取集合面积的重心）

在附上所有代码之前。我对当时所实现的产品功能和业务场景做大致讲解：

业务场景：

1、有project、buinding、unit三个核心实体，

即项目 -> 物业 -> 单元，均为一对多关系

2、在开发3d之前。已有2维描边基础，所以有现成经纬度

产品功能：

1、按照录入的楼层层高、数量、是否在租等信息展示模型

2、点击模型时，改变颜色或者显示相关弹窗等

重点：

1、构建模型时可能存在楼层悬空后，楼层之间区分不明显，此时可以在中间塞入一个高度值较小、且不同颜色的模型模拟地板的效果

2、模型的点击事件不是很准确（这是必然的，和角度也有一点关系）

代码主要是前端js、vue代码，仅供参考，若有不明确之处，还望多多实验，或评论留言，

附上的代码中 我去掉了一些无关代码，若用心阅读，应该是能理解大致含义的，主要关注方法initAMap即可